<template>
  <div id="sideber">
    <ul class="mynav">
      <li @click="navtab(index)" v-for="(item, index) in mycont" :key="index" :class="{active:actives==index}">{{item.title}}</li>
    </ul>
    <ul class="mycont">
      <li class="contlist">
        <a href="/ClassifyList" @click="go(index)" :list="list.list" v-for="(item, index) in list.contlist" :key="index">
          <ul>
            <li><img :src="item.img"></li>
            <li v-if="item.title">{{item.title}}</li>
            <li v-else>{{item.text}}</li>
          </ul>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'sideber',
  props: ['mycont'],
  data () {
    return {
      actives: '',
      list: '',
      classify: ''
    }
  },
  watch: {
    mycont: function (newVal, oldVal) {
      this.navtab(0)
    }
  },
  methods: {
    navtab (index) {
      this.list = this.mycont[index]
      this.actives = index
      console.log(index)
    },
    go (index) {
      this.classify = this.mycont[this.actives].contlist[index].title
      localStorage.setItem('classify', JSON.stringify(this.classify))
    }
  }
}
</script>

<style scoped lang="less">
#sideber {
  background: rgba(255, 255, 255, 1);
  font-size: 24px; /*px*/
  display: flex;
  .mynav {
    background: rgba(225, 225, 225, 0.8);
    width: 20%;
    height: 1114px;
    overflow: hidden;
    overflow-y: auto;
    li {
      text-align: center;
      padding: 30px 0;
    }
  }
  .mycont {
    border-right: 1px solid rgba(200, 200, 200, 0.9);
    width: 80%;
    height: 1114px;
    overflow: hidden;
    overflow-y: auto;
    .contlist {
      display: flex;
      flex-wrap: wrap;
      a {
        width: 33.33%;
        color: rgba(105, 105, 105, 0.9);
        ul {
          width: 100%;
          li {
            text-align: center;
          }
          li:nth-of-type(1) {
            img {
              width: 120px;
            }
          }
          li:nth-of-type(2) {
            padding: 5px 0;
          }
        }
      }
    }
  }
}
.active {
  background: rgba(255, 255, 255, 1);
  border-right: none;
  border-left: 5px solid rgba(255, 0, 0, 1);
  color: rgb(255, 0, 0);
}
</style>
